<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>yqKanban</title>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>
    <!-- <link href="/scripts/kanban/jkanban.css" rel="stylesheet" />
    <script src="/scripts/kanban/jkanban.js"></script> -->
    <link href="/scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/scripts/bootstrap/js/bootstrap.min.js"></script>
    <style>
        #myKanban {
            overflow-x: auto;
            padding: 20px 0;
        }

        .todo {
            background: #2a92bf;
        }

        .working {
            background: #f4ce46;
        }

        .check {
            background: #fb7d44;
        }

        .done {
            background: #00b961;
        }

        .custom-button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 7px 15px;
            margin: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }

        .kanban-board .kanban-drag {
            min-height: 200px;
            padding: 5px;
            height: 60vh;
            overflow: auto;
        }

        .kanban-item {
            background: #fff;
            padding: 15px;
            margin-bottom: 5px;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            animation: append-animate 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }
    </style>
</head>

<body>
    <h1>yqKanban</h1>
    <div id="myKanban"></div>
    <button id="addDefault">Add "Default" board</button>
    <button id="addToDo">Add element in "To Do" Board</button>
    <button id="addToDoAtPosition">Add element in "To Do" Board at position 2</button>
    <button id="removeBoard">Remove "Done" Board</button>
    <button id="removeElement">Remove "My Task Test"</button>

    <script>

        $(function () {
            $("#myKanban").yqKanban({});

        })

        // var KanbanTest = new jKanban({
        //     element: "#myKanban",

        //     gutter: '5px',                                       // gutter of the board
        //     widthBoard: '330px',                                      // width of the board
        //     responsivePercentage: false,                                    // if it is true I use percentage in the width of the boards and it is not necessary gutter and widthBoard
        //     dragItems: true,                                         // if false, all items are not draggable
        //     boards: [],                                           // json of boards
        //     dragBoards: true,

        //     itemHandleOptions: {
        //         handleClass: "item_handle",                         // css class for your custom item handle
        //         customCssHandler: "drag_handler",                        // when customHandler is undefined, jKanban will use this property to set main handler class
        //         customCssIconHandler: "drag_handler_icon",                   // when customHandler is undefined, jKanban will use this property to set main icon handler class. If you want, you can use font icon libraries here
        //         //customHandler: "<span class='item_handle'>+</span> %title% <p> %title% </p>"  // your entirely customized handler. Use %title% to position item title
        //         // any key's value included in item collection can be replaced with %key%
        //         customHandler: function (item) {
        //             var h_ = `<span class="label label-info">项目任务</span> <span class="label label-info">待办任务</span>  <span class="label label-danger">高</span>
        //             <div class="dropdown pull-right">
        //                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        //                     <span class="glyphicon glyphicon-option-vertical"></span>
        //                 </button>
        //                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        //                     <li><a href="#">修改</a></li>
        //                     <li><a href="#">删除</a></li>
        //                 </ul>
        //             </div>
        //             <h3 class="title">`+ item.title + `</h3>
        //             `;
        //             if (!(item.describe === undefined || item.describe === null || item.describe == "")) {
        //                 h_ += "<p>" + item.describe + "</p>";
        //             }

        //             h_ += `<div class="progress" style="height: 5px;width:80%;">
        //                     <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
        //                         <span class="sr-only">20% Complete</span>
        //                     </div>
        //                   </div><div>20%</div>`;

        //             h_ += `<div class="users">
        //                     <span class="label label-primary">张三</span>
        //                     <span class="label label-primary">李四</span>
        //                   </div>`;
        //             h_ += `<div class="time">
        //                     <span>2022/1/2至2023/5/6</span>
        //                   </div>`;
        //             h_ += `<div class="pinglun pull-right">
        //                     <span class="glyphicon glyphicon-heart">2</span>
        //                     <span class="glyphicon glyphicon-ok-circle">4</span>
        //                   </div>`;

        //             return h_;
        //         }
        //     },

        //     // click: function (el) {
        //     //     console.log("Trigger on all items click!");
        //     // },
        //     // context: function (el, e) {
        //     //     console.log("Trigger on all items right-click!");
        //     // },
        //     dropEl: function (el, target, source, sibling) {
        //         console.log("dropEl end", target.parentElement.getAttribute('data-id'));
        //         console.log(el, target, source, sibling)
        //     },
        //     // buttonClick: function (el, boardId) {
        //     //     console.log(el, el.classList);
        //     //     console.log(boardId);
        //     //     // create a form to enter element
        //     //     var formItem = document.createElement("form");
        //     //     formItem.setAttribute("class", "itemform");
        //     //     formItem.innerHTML =
        //     //         '<div class="form-group"><textarea class="form-control" rows="2" autofocus></textarea></div><div class="form-group"><button type="submit" class="btn btn-primary btn-xs pull-right">Submit</button><button type="button" id="CancelBtn" class="btn btn-default btn-xs pull-right">Cancel</button></div>';

        //     //     KanbanTest.addForm(boardId, formItem);
        //     //     formItem.addEventListener("submit", function (e) {
        //     //         e.preventDefault();
        //     //         var text = e.target[0].value;
        //     //         KanbanTest.addElement(boardId, {
        //     //             title: text
        //     //         });
        //     //         formItem.parentNode.removeChild(formItem);
        //     //     });
        //     //     document.getElementById("CancelBtn").onclick = function () {
        //     //         formItem.parentNode.removeChild(formItem);
        //     //     };
        //     // },

        //     boards: [
        //         {
        //             id: "_todo",
        //             title: "To Do",
        //             titleAdd: `
        //             <div class="dropdown"  style="position: absolute;right: 10px;top: 6px;">
        //                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        //                     <span class="glyphicon glyphicon-option-horizontal"></span>
        //                 </button>
        //                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        //                     <li><a href="#">添加待办</a></li>
        //                 </ul>
        //             </div>
        //             `,
        //             class: "todo",
        //             dragTo: ["_working", "_check"],
        //             item: [
        //                 {
        //                     id: "_test_delete",
        //                     title: "Try drag this (Look the console)",
        //                     describe: "describe",
        //                     startdate: "2023/01/01",
        //                     enddate: "2023/01/01",
        //                     priority: 0.61,
        //                     userlist: [],
        //                     users: [],
        //                     state: 0,
        //                     drag: function (el, source) {
        //                         console.log("START DRAG: " + el.dataset.eid);
        //                     },
        //                     dragend: function (el) {
        //                         console.log("END DRAG: " + el.dataset.eid);
        //                     },
        //                     drop: function (el) {
        //                         console.log("DROPPED: " + el.dataset.eid);
        //                     },
        //                     click: function (el) {
        //                         console.log("click1", JSON.stringify(el.dataset));
        //                         //id==>eid
        //                         //alert("click1" + el.dataset.eid);
        //                     },

        //                 },
        //                 {
        //                     title: "Try Click This!",
        //                     click: function (el) {
        //                         alert("click");
        //                     },
        //                     context: function (el, e) {
        //                         alert("right-click at (" + `${e.pageX}` + "," + `${e.pageX}` + ")")
        //                     },
        //                     //class: ["peppe", "bello"]
        //                 }
        //             ]
        //         },
        //         {
        //             id: "_working",
        //             title: "Working",
        //             class: "working",
        //             dragTo: ["_todo", "_check"],
        //             item: [
        //                 {
        //                     title: "Do Something!"
        //                 },
        //                 {
        //                     title: "Run?"
        //                 }
        //             ]
        //         },
        //         {
        //             id: "_check",
        //             title: "Check",
        //             class: "check",
        //             dragTo: ["_todo", "_working"],
        //             item: [
        //                 {
        //                     title: "Do Check!"
        //                 },
        //                 {
        //                     title: "Run Check?"
        //                 }
        //             ]
        //         },
        //         {
        //             id: "_done",
        //             title: "Done",
        //             titleAdd: `
        //             <div class="dropdown"  style="position: absolute;right: 10px;top: 6px;">
        //                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        //                     <span class="glyphicon glyphicon-option-horizontal"></span>
        //                 </button>
        //                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        //                     <li><a href="#">更多...</a></li>
        //                 </ul>
        //             </div>
        //             `,
        //             class: "done",
        //             dragTo: ["_todo", "_working"],
        //             item: [
        //                 {
        //                     title: "All right"
        //                 },
        //                 {
        //                     title: "Ok!"
        //                 }
        //             ]
        //         }
        //     ]
        // });

        // var toDoButton = document.getElementById("addToDo");
        // toDoButton.addEventListener("click", function () {
        //     KanbanTest.addElement("_todo", {
        //         title: "Test Add",
        //         describe: "describewerwerwerwerwerwerwerwe",
        //     });
        // });

        // var toDoButtonAtPosition = document.getElementById("addToDoAtPosition");
        // toDoButtonAtPosition.addEventListener("click", function () {
        //     KanbanTest.addElement("_todo", {
        //         title: "Test Add at Pos"
        //     }, 1);
        // });

        // var addBoardDefault = document.getElementById("addDefault");
        // addBoardDefault.addEventListener("click", function () {
        //     KanbanTest.addBoards([
        //         {
        //             id: "_default",
        //             title: "Kanban Default",
        //             item: [
        //                 {
        //                     title: "Default Item"
        //                 },
        //                 {
        //                     title: "Default Item 2"
        //                 },
        //                 {
        //                     title: "Default Item 3"
        //                 }
        //             ]
        //         }
        //     ]);
        // });

        // var removeBoard = document.getElementById("removeBoard");
        // removeBoard.addEventListener("click", function () {
        //     KanbanTest.removeBoard("_done");
        // });

        // var removeElement = document.getElementById("removeElement");
        // removeElement.addEventListener("click", function () {
        //     KanbanTest.removeElement("_test_delete");
        // });

        // var allEle = KanbanTest.getBoardElements("_todo");
        // allEle.forEach(function (item, index) {
        //     //console.log(item);
        // });
    </script>


    <script>

            (function ($) {
                $.fn.yqKanban = function (opts, param) {
                    if (typeof opts == 'string') {
                        return $.fn.yqKanban.methods[opts](this, param);
                    }

                    return this.each(function () {
                        var $this = $(this);
                        var opt;
                        if ($this.data("yqtype") == "yqKanban") {
                            var $uniqueID = $this.attr("ID");
                            var opts_ = $.extend({}, options($this));
                            destroy($this);
                            $this = $("#" + $uniqueID);
                            opt = $.extend(opts_, opts);
                        }
                        else {
                            opt = $.extend({}, $.fn.yqKanban.defaults, opts);
                            var $uniqueID = $this.attr("ID");
                            if ($uniqueID === undefined || $uniqueID === null || $uniqueID == "") {
                                $uniqueID = $.getUniqueID();
                                $this.attr("ID", $uniqueID);
                            }
                        }

                        if (opt.width === undefined && $this.width() > 0) {
                            opt.width = $this.width();
                        }
                        else if (typeof opt.width != "undefined") {
                            $this.width(opt.width);
                        }

                        if (opt.height === undefined && $this.height() > 0) {
                            opt.height = $this.height();
                        }
                        else if (typeof opt.height != "undefined") {
                            $this.height(opt.height);
                        }

                        //变量信息
                        $this.data("yqKanban_opt", opt);
                        $this.data("yqtype", "yqKanban");

                        opt.beforeBindingTitle.call($this, function () {
                            LoadJsCss(function () {
                                init_ui($this);
                            });
                        });
                    });
                };

                $.fn.yqKanban.defaults = {
                    ajaxUrl: "/Api/Base/table.html", //ajax地址
                    //width: 600,
                    //height: 280,
                    isEdit: true,                    //是否可用，默认可用
                    showgrid: true,                  //显示表格
                    showchart: true,                  //显示图表
                    data: {},
                    beforeBindingTitle: function (callback) {
                        callback();
                    },
                    afterBindingTitle: function () {
                    },
                    //onClickRow: function (rowIndex, rowData) { },  //选择行事件 null：为空
                };

                $.fn.yqKanban.methods = {
                    options: function (jq) {
                        return options($(jq[0]));
                    },

                    isEdit: function (jq, tf) {
                        isEdit($(jq[0]), tf);
                    },
                    clear: function (jq) {
                        clear($(jq[0]));
                    },
                    getData: function (jq) {
                        return getData($(jq[0]));
                    },
                    setData: function (jq, tasks) {
                        setData($(jq[0]), tasks);
                    },
                    resize: function (jq, para) {
                        resize($(jq[0]), para);
                    },
                    destroy: function (jq) {
                        destroy($(jq[0]));
                    },
                };

                function LoadJsCss(callback) {
                    //设置css
                    // var cssText = `
                    //             .gantt_task_cell.week_end {
                    //                 background-color: #EFF5FD;
                    //             }

                    // .gantt_task_row.gantt_selected .gantt_task_cell.week_end {
                    //     background-color: #F8EC9C;
                    // }
                    //         `;
                    // $.yqAddCSS(cssText, "ganttcss");

                    var file = [];
                    file.push({ url: "/scripts/kanban/jkanban.js", type: "js" });
                    file.push({ url: "/scripts/kanban/jkanban.css", type: "css" });
                    $.yqLoadJsCss(file, function () {
                        callback();
                    })
                }

                function options($object) {
                    return $object.data("yqKanban_opt");
                }


                function isEdit($object, tf) {
                    var opt = options($object);

                }

                function resize($object, para) {
                    var opt = options($object);
                    if (typeof para != "undefined") {
                        if (typeof para.width != "undefined") {
                            opt.width = para.width;
                        }
                        if (typeof para.height != "undefined") {
                            opt.height = para.height;
                        }
                    }

                    $object.width(opt.width);
                    $object.height(opt.height);

                }

                function destroy($object) {
                    var opt = options($object);

                }

                function clear($object) {
                    var opt = options($object);

                }

                function init_ui($object) {
                    var opt = options($object);
                    var $uniqueID = $object.attr("ID");


                    opt._kanban = new jKanban({
                        element: "#" + $uniqueID,

                        gutter: '5px',                                       // gutter of the board
                        widthBoard: '330px',                                      // width of the board
                        responsivePercentage: false,                                    // if it is true I use percentage in the width of the boards and it is not necessary gutter and widthBoard
                        dragItems: true,                                         // if false, all items are not draggable
                        boards: [],                                           // json of boards
                        dragBoards: true,

                        itemHandleOptions: {
                            handleClass: "item_handle",                         // css class for your custom item handle
                            customCssHandler: "drag_handler",                        // when customHandler is undefined, jKanban will use this property to set main handler class
                            customCssIconHandler: "drag_handler_icon",                   // when customHandler is undefined, jKanban will use this property to set main icon handler class. If you want, you can use font icon libraries here
                            //customHandler: "<span class='item_handle'>+</span> %title% <p> %title% </p>"  // your entirely customized handler. Use %title% to position item title 
                            // any key's value included in item collection can be replaced with %key%
                            customHandler: function (item) {
                                var h_ = `<span class="label label-info">项目任务</span> <span class="label label-info">待办任务</span>  <span class="label label-danger">高</span>
                    <div class="dropdown pull-right">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-option-vertical"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a href="#">修改</a></li>
                            <li><a href="#">删除</a></li>
                        </ul>
                    </div>        
                    <h3 class="title">`+ item.title + `</h3>
                    `;
                                if (!(item.describe === undefined || item.describe === null || item.describe == "")) {
                                    h_ += "<p>" + item.describe + "</p>";
                                }

                                h_ += `<div class="progress" style="height: 5px;width:80%;">
                            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                <span class="sr-only">20% Complete</span>
                            </div>
                          </div><div>20%</div>`;

                                h_ += `<div class="users">
                            <span class="label label-primary">张三</span>
                            <span class="label label-primary">李四</span>
                          </div>`;
                                h_ += `<div class="time">
                            <span>2022/1/2至2023/5/6</span>
                          </div>`;
                                h_ += `<div class="pinglun pull-right">
                            <span class="glyphicon glyphicon-heart">2</span>
                            <span class="glyphicon glyphicon-ok-circle">4</span>
                          </div>`;

                                return h_;
                            }
                        },

                        // click: function (el) {
                        //     console.log("Trigger on all items click!");
                        // },
                        // context: function (el, e) {
                        //     console.log("Trigger on all items right-click!");
                        // },
                        dropEl: function (el, target, source, sibling) {
                            console.log("dropEl end", target.parentElement.getAttribute('data-id'));
                            console.log(el, target, source, sibling)
                        },
                        // buttonClick: function (el, boardId) {
                        //     console.log(el, el.classList);
                        //     console.log(boardId);
                        //     // create a form to enter element
                        //     var formItem = document.createElement("form");
                        //     formItem.setAttribute("class", "itemform");
                        //     formItem.innerHTML =
                        //         '<div class="form-group"><textarea class="form-control" rows="2" autofocus></textarea></div><div class="form-group"><button type="submit" class="btn btn-primary btn-xs pull-right">Submit</button><button type="button" id="CancelBtn" class="btn btn-default btn-xs pull-right">Cancel</button></div>';

                        //     KanbanTest.addForm(boardId, formItem);
                        //     formItem.addEventListener("submit", function (e) {
                        //         e.preventDefault();
                        //         var text = e.target[0].value;
                        //         KanbanTest.addElement(boardId, {
                        //             title: text
                        //         });
                        //         formItem.parentNode.removeChild(formItem);
                        //     });
                        //     document.getElementById("CancelBtn").onclick = function () {
                        //         formItem.parentNode.removeChild(formItem);
                        //     };
                        // },

                        boards: [
                            {
                                id: "_todo",
                                title: "To Do",
                                titleAdd: `
                    <div class="dropdown"  style="position: absolute;right: 10px;top: 6px;">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-option-horizontal"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a href="#">添加待办</a></li>
                        </ul>
                    </div>              
                    `,
                                class: "todo",
                                dragTo: ["_working", "_check"],
                                item: [
                                    {
                                        id: "_test_delete",
                                        title: "Try drag this (Look the console)",
                                        describe: "describe",
                                        startdate: "2023/01/01",
                                        enddate: "2023/01/01",
                                        priority: 0.61,
                                        userlist: [],
                                        users: [],
                                        state: 0,
                                        drag: function (el, source) {
                                            console.log("START DRAG: " + el.dataset.eid);
                                        },
                                        dragend: function (el) {
                                            console.log("END DRAG: " + el.dataset.eid);
                                        },
                                        drop: function (el) {
                                            console.log("DROPPED: " + el.dataset.eid);
                                        },
                                        click: function (el) {
                                            console.log("click1", JSON.stringify(el.dataset));
                                            //id==>eid
                                            //alert("click1" + el.dataset.eid);
                                        },

                                    },
                                    {
                                        title: "Try Click This!",
                                        click: function (el) {
                                            alert("click");
                                        },
                                        context: function (el, e) {
                                            alert("right-click at (" + `${e.pageX}` + "," + `${e.pageX}` + ")")
                                        },
                                        //class: ["peppe", "bello"]
                                    }
                                ]
                            },
                            {
                                id: "_working",
                                title: "Working",
                                class: "working",
                                dragTo: ["_todo", "_check"],
                                item: [
                                    {
                                        title: "Do Something!"
                                    },
                                    {
                                        title: "Run?"
                                    }
                                ]
                            },
                            {
                                id: "_check",
                                title: "Check",
                                class: "check",
                                dragTo: ["_todo", "_working"],
                                item: [
                                    {
                                        title: "Do Check!"
                                    },
                                    {
                                        title: "Run Check?"
                                    }
                                ]
                            },
                            {
                                id: "_done",
                                title: "Done",
                                titleAdd: `
                    <div class="dropdown"  style="position: absolute;right: 10px;top: 6px;">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-option-horizontal"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a href="#">更多...</a></li>
                        </ul>
                    </div>              
                    `,
                                class: "done",
                                dragTo: ["_todo", "_working"],
                                item: [
                                    {
                                        title: "All right"
                                    },
                                    {
                                        title: "Ok!"
                                    }
                                ]
                            }
                        ]
                    });
                }



                function getData($object) {
                    var opt = options($object);
                    var $uniqueID = $object.attr("ID");


                    return opt.data;
                }

                function setData($object, tasks) {

                }
            })(jQuery);



    </script>
</body>

</html>